/**
 * 分类页面逻辑
 */
document.addEventListener('DOMContentLoaded', () => {
    // DOM元素
    const categoriesGrid = document.getElementById('categories-grid');
    
    /**
     * 初始化页面
     */
    async function init() {
        // 加载分类数据
        await loadCategories();
    }
    
    /**
     * 加载分类列表
     */
    async function loadCategories() {
        try {
            // 显示加载中
            categoriesGrid.innerHTML = `
                <div class="loading-spinner">
                    <div class="spinner"></div>
                    <p>加载中...</p>
                </div>
            `;
            
            // 请求分类数据
            const response = await API.getCategories();
            
            // 渲染分类列表
            renderCategories(response.data);
            
        } catch (error) {
            console.error('加载分类失败:', error);
            showError('加载分类失败，请刷新重试');
        }
    }
    
    /**
     * 渲染分类列表
     */
    function renderCategories(categories) {
        // 清空容器
        categoriesGrid.innerHTML = '';
        
        // 创建分类卡片
        categories.forEach(category => {
            const categoryCard = createCategoryCard(category);
            categoriesGrid.appendChild(categoryCard);
        });
    }
    
    /**
     * 创建分类卡片
     */
    function createCategoryCard(category) {
        const card = document.createElement('div');
        card.className = 'category-card';
        
        card.innerHTML = `
            <img class="category-img" src="${category.image}" alt="${category.name}">
            <div class="category-overlay">
                <div class="category-name">${category.name}</div>
                <div class="category-count">${category.wallpaper_count}张壁纸</div>
            </div>
        `;
        
        // 点击跳转到分类浏览页面，而不是首页
        card.addEventListener('click', () => {
            window.location.href = `category-content.html?id=${category.id}`;
        });
        
        return card;
    }
    
    /**
     * 显示错误提示
     */
    function showError(message) {
        categoriesGrid.innerHTML = `
            <div class="error-message">
                <i class="ri-error-warning-line"></i>
                <p>${message}</p>
                <button onclick="window.location.reload()">重试</button>
            </div>
        `;
    }
    
    // 初始化
    init();
}); 